import { Modal, Button} from 'antd';
import React from 'react';
import './Modal_1.css'

function Modal_1(props) {
    // 查看模态框默认隐藏
    const [visible, setVisible] = React.useState(false);
    // 点击查看模态框出现
    const showModal = () => {
        setVisible(true);
    };
    // 点击确认模态框消失
    const handleOk = () => {
        setVisible(false);
    };

    //   点击取消模态框消失
    const handleCancel = () => {
        setVisible(false);
    };
    
    return (
        <div className='Modal_1'>
            <Button type="link" onClick={showModal}>
                查看
            </Button>
            <Modal
                height="100"
                title="查看"
                visible={visible}
                onCancel={() => handleCancel()}
                footer={[
                    <Button className="Ok" onClick={handleOk}>确认</Button>,
                    <Button onClick={handleCancel}>取消</Button>
                ]}
            >
                <div className="modal1">
                    <div className="modal1-1">
                        <p>角色名称</p>
                        <p>角色账号</p>
                        <p>角色密码</p>
                        <p>创建时间</p>
                        <p>角色状态</p>
                    </div>
                    <div className="modal1-2">
                        <p>{props.name.role_name}</p>
                        <p>{props.name.admin}</p>
                        <p>{props.name.password}</p>
                        <p>{props.name.Creation_time}</p>
                        <p>{props.name.admin_state}</p>
                    </div>
                </div>
            </Modal>
        </div>
    )
}
export default Modal_1;